<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <!-- 移动端设置不缩放 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客管理</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" th:href="@{/css/common.css}">
        <link rel="stylesheet" th:href="@{/css/admin/common-admin.css}">
    </head>
    <body>
        <!-- navbar -->
        <nav th:replace="_fragment::admin-navbar(0)"></nav>
        
        <!-- content -->
        <div>
            <div class="container">
                <div class="row m-container">
                    <div class="col-sm-10 col-sm-offset-1">
                        <div class="panel panel-default">
                            <!-- search -->
                            <div class="panel-body">
                                <div>
                                    <div class="form-group form-row">
                                        <div class="col-sm-5">
                                            <input type="text" class="form-control" id="title" name="title" placeholder="标题" required>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group auto-center-src-1">
                                                <input type="hidden" id="typeId">
                                                <select class="form-control" name="types" id="types">
                                                    <option value="">分类</option>
                                                    <option th:each="type: ${types}" th:value="${type.id}" th:text="${type.name}"></option>
                                                </select>
                                             </div>
                                        </div>
                                        <div class="col-sm-2 auto-center-target-1 li-center">
                                            <input class="checkbox" id="recommend" type="checkbox">
                                            <label for="recommend">推荐</label>
                                        </div>
                                        <div class="col-sm-2">
                                            <input id="page" type="hidden" th:value="${pages.current}">
                                            <button class="btn btn-default" onclick="loadBlogList()">
                                                <span class="glyphicon glyphicon-search"></span> 
                                                搜索
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- items -->
                        <div class="m-table" id="blogListContent">
                            <table th:fragment="blogList" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>标题</th>
                                        <th>类型</th>
                                        <th>推荐</th>
                                        <th>浏览次数</th>
                                        <th>更新时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="blog, iterStat: ${pages.getRecords()}">
                                        <td th:text="${iterStat.count + pages.offset()}"></td>
                                        <td th:text="${blog.title}"></td>
                                        <td th:text="${blog.type.name}"></td>
                                        <td><span th:if="${blog.recommend}" class="glyphicon glyphicon-ok"></span></td>
                                        <td th:text="${blog.views}"></td>
                                        <td th:text="${blog.updateTime}"></td>
                                        <td th:text="${blog.published ? '发布' : '草稿'}"></td>
                                        <td>
                                            <a class="btn btn-add" th:href="@{/admin/blog/publish(id=${blog.id})}">编辑</a>
                                            <a class="btn btn-delete" th:onclick="'deleteBlog(' + ${blog.id} + ')'">删除</a>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="8">
                                            <div class="btn-group" role="group" th:if="${pages.total > 1}">
                                                <button th:class="${'btn btn-common ' + (pages.current > 1 ? '' : 'disabled')}" type="button" th:onclick="'loadBlogList(' + ${pages.current - 1} + ')'">上一页</button>
                                                <button th:class="${'btn btn-common ' + (pages.current < pages.pages ? '' : 'disabled')}" type="button" th:onclick="'loadBlogList(' + ${pages.current + 1} + ')'">下一页</button>
                                            </div>
                                            <a class="btn btn-default pull-right" href="/admin/blog/publish">发布</a>
                                        </th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>  
        </div>

        <!-- footer -->
        <footer th:replace="_fragment::footer"></footer>

        <script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
        <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
        <script th:src="@{/js/common.js}"></script>
        <script th:src="@{/js/admin/blog.js}"></script>
    </body>
</html>